<template>
	<view class="page-content">
		<block v-if="islogin">
			<view class="top-msg">
				<view class="flex-row justify-around" style="gap: 20rpx;">
					<u-image v-for="(item, index) in formdata.avatar" :key="index" :src="item" width="120rpx" height="120rpx"
						border-radius="24" />
				</view>
				<text class="self-start text">{{ formdata.nickName }}</text>
				<view class="flex-row items-start self-stretch group_4">
					<text class="flex-1 font text_2">
						{{ formdata.introduce || "暂无" }}
					</text>
					<image class="ml-20 shrink-0 image_4" src="/static/common/edit-icon.png" @click="showEditMsg = true" />
				</view>
			</view>
			<view class="sign-today">
				<view class="flex-col section_2">
					<view class="flex-row justify-between items-center">
						<view class="flex-row items-center">
							<text class="font_2 text_3">连续签到</text>
							<text class="ml-10 font_2 text_4">{{signdays}}</text>
							<text class="ml-10 font_2 text_5">天</text>
						</view>
						<view class="flex-row items-center">
							<view class="group_6" @click="handleToGongLue">
								<text class="font text_6">获取更多</text>
								<text class="font_3 text_7">光芒</text>
							</view>
							<image class="ml-4 shrink-0 image_5" src="/static/common/right-arrow.png" />
						</view>
					</view>
					<view class="flex-row justify-between">
						<view class="flex-col justify-between group_7" v-for="(item, index) in thisWeek" :key="index">
							<text class="font" :style="today===item.date?'color:#FC8F10':''">{{ item.week }}</text>
							<view class="flex-col justify-start items-center text-wrapper_2"
								style="background-color:rgba(252,214,16,0.4);" v-if="item.isSignIn==1">
								<u-icon name="checkmark" color="#FC8F10" size="24"></u-icon>
							</view>
							<view class="flex-col justify-start items-center text-wrapper_2" style="background-color: #F3F3F3;"
								v-else-if="item.isSignIn==0&&item.integral==0">
								<u-icon name="close" color="#D8D8D8" size="24"></u-icon>
							</view>
							<view v-else-if="today===item.date" class="flex-col justify-start items-center text-wrapper_2"
								style="background-color: rgba(252,214,16,0.4);border: 4rpx solid #FC8F10;"
								@tap="handleSign(item,index)"><text class="font_4"
									style="color: #FC8F10;">{{`+${item.integral||''}`}}</text>
							</view>
							<view v-else class="flex-col justify-start items-center text-wrapper_2"><text
									class="font_4">{{`+${item.integral||''}`}}</text>
							</view>
							<text class="font_5">{{ item.monthday }}</text>
						</view>
					</view>
				</view>
			</view>
		</block>
		<block v-else>
			<view class="no-sign" @click="showLogin = true"> 登录/注册 </view>
		</block>
		<view class="cells">
			<view class="flex-col section_3">
				<view class="flex-row justify-between cell-box items-center"
					@click="handleLinkTo(`/page_index/me/components/user-detail/user-detail`)">
					<text class="font_6">个人主页</text>
					<image class="image_7" src="/static/common/right-arrow.png" />
				</view>
				<!-- <view class="flex-row justify-between cell-box items-center"
					@click="handleLinkTo('/page_index/me/components/petCards/petCards')">
					<text class="font_6">我的宠行证</text>
					<image class="image_7" src="/static/common/right-arrow.png" />
				</view> -->
				<view class="flex-row justify-between cell-box items-center"
					@click="handleLinkTo('/page_index/me/components/address/address')">
					<text class="font_6">我的地址</text>
					<image class="image_7" src="/static/common/right-arrow.png" />
				</view>
			</view>
			<view class="flex-col section_3">
				<view class="flex-row justify-between cell-box items-center"
					@click="handleLinkTo('/page_index/me/components/petService/petService')">
					<text class="font_6">宠物服务</text>
					<image class="image_7" src="/static/common/right-arrow.png" />
				</view>
			</view>
			<view class="flex-col section_3">
				<view class="flex-row justify-between cell-box items-center"
					@click="handleLinkTo('/page_index/news/user-chat/user-chat?userId=9999')">
					<text class="font_6">联系反馈</text>
					<image class="image_7" src="/static/common/right-arrow.png" />
				</view>
				<view class="flex-row justify-between cell-box items-center"
					@click="handleLinkTo('/page_index/me/components/about/about')">
					<text class="font_6">关于我们</text>
					<image class="image_7" src="/static/common/right-arrow.png" />
				</view>
				<!-- <view class="flex-row justify-between cell-box items-center"
					@click="handleLinkTo('/page_index/me/components/user-detail/user-detail')">
					<text class="font_6">邀请好友</text>
					<image class="image_7" src="/static/common/right-arrow.png" />
				</view> -->
			</view>
		</view>
		<view class="bottom-box" v-if="islogin">
			<view class="flex-col justify-start items-center button text-wrapper_3" @click="logout">
				<text class="font_2">退出登录</text>
			</view>
		</view>
		<u-popup v-model="showEditMsg" mode="bottom" border-radius="48">
			<view style="padding: 32rpx">
				<view class="edit-title">头像编辑</view>
				<view class="flex-row">
					<!-- 					<view class="flex-row">
						<view v-for="(item, index) in avatar" :key="`${index}${index}`" style="margin: 10rpx;position: relative;">
							<u-image :src="item" width="120rpx" height="120rpx" border-radius="14" />
							<view @click="removePhotoOld(index)" class="flex-row items-center justify-center"
								style="position: absolute;top:14rpx;right: 14rpx;border-radius: 50%;z-index: 999;background-color: #fa3534;padding: 10rpx;">
								<u-icon name="close" color="#FFFFFF" size="20"></u-icon>
							</view>
						</view>
					</view> -->
					<!-- 	<u-upload ref="fileref" :file-list="avatar" :header="header" :action="action" @on-success="successPhoto"
						@on-remove="removePhoto" width="120" height="120" :max-count="maxCount"></u-upload> -->
					<l-upload width="120" height="120" @complete="successPhoto" @remove="removePhoto" limit="4" :images="oldformdata.avatar"
						:header="header" :serverUrl="action" uploadType="img"></l-upload>
				</view>
				<view class="edit-title">宠行宝名</view>
				<view class="edit-content">
					<u-input v-model="oldformdata.nickName" />
				</view>
				<view class="edit-title">编辑简介</view>
				<view class="edit-content">
					<u-input v-model="oldformdata.introduce" type="textarea" />
				</view>
				<view class="save-msg">
					<view class="submit" @click="handleSave"> 保存 </view>
				</view>
			</view>
		</u-popup>
		<login-popup :show="showLogin" @handleClose="handleClose" @onSuccess="handleSuccess" />
	</view>
</template>

<script>
	import mine from "../../api/mine.js";
	import loginPopup from "components/common/login/login-popup.vue";
	import lUpload from "components/l-upload/l-upload.vue"
	import utils from "../../utils/util.js";
	export default {
		data() {
			return {
				action: this.$config.mobeilURL + "/common/uploadFile",
				thisWeek: [],
				oldformdata: {
					avatar: [],
					introduce: "",
					nickName: "",
				},
				islogin: false,
				showEditMsg: false,
				showLogin: false,
				formdata: {
					avatar: [],
					introduce: "",
					nickName: "",
				},
				maxCount: 4,
				avatar: [],
				header: {
					"content-type": "multipart/form-data",
					Authorization: uni.getStorageSync("cxbtoken"),
				},
				signdays: 0,
				today: ''
			};
		},
		watch: {
			showLogin: function(newvalue, oldvalue) {
				if (newvalue === false) {
					this.getUserInfo();
				}
			},
			// 'oldformdata.avatar': function(newvalue, oldvalue) {
			// 	this.maxCount = 4 - newvalue.length;
			// },
		},
		onLoad() {
			this.getTimeandWeek();
		},
		onShow() {
			this.getUserInfo();
			if (uni.getStorageSync("userinfo")) {
				this.islogin = true;
			} else this.islogin = false;
		},
		methods: {
			handleClose() {
				this.showLogin = false;
			},
			handleSuccess() {
				this.getUserInfo();
				this.getTimeandWeek();
				if (uni.getStorageSync("userinfo")) {
					this.islogin = true;
					this.header.Authorization = uni.getStorageSync("cxbtoken");
				} else this.islogin = false;
			},
			getUserInfo() {
				// const userinfo = uni.getStorageSync("userinfo");
				mine.getUserInfo(uni.getStorageSync("userinfo").id).then(res => {
					if (res.code == 200) {
						this.formdata = res.data;
						uni.setStorageSync('userinfo', res.data);
						this.oldformdata = JSON.parse(JSON.stringify(this.formdata));
						if (
							this.formdata.avatar !== null &&
							this.formdata.avatar !== undefined &&
							this.formdata.avatar
						) {
							this.formdata.avatar = this.formdata.avatar.split(",");
							this.oldformdata.avatar = JSON.parse(JSON.stringify(this.formdata.avatar))
							// this.maxCount = 4 - this.avatar.length;
						} else {
							this.formdata.avatar = [];
							this.oldformdata.avatar = [];
							// this.avatar = [];
						}
					}
				})
			},
			getTimeandWeek() {
				let weekDay = ["周一", "周二", "周三", "周四", "周五", "周六", "周天"];
				let now = new Date();
				// 获取本周的第一天（周一）
				let firstDay = new Date(
					now.setDate(
						now.getDate() - now.getDay() + (now.getDay() === 0 ? -6 : 1)
					)
				);
				// 存储本周的日期
				let weekDates = [];
				// 循环获取本周的所有日期
				for (let i = 0; i < 7; i++) {
					let tempDate = new Date(firstDay);
					tempDate.setDate(firstDay.getDate() + i);
					let year = tempDate.getFullYear();
					let month = tempDate.getMonth() + 1;
					let day = tempDate.getDate();
					weekDates.push({
						week: weekDay[i],
						date: utils.formatTime(tempDate.getTime(), 'Y-M-D'),
						monthday: (month < 10 ? "0" : "") + month + "." + (day < 10 ? "0" : "") + day,

					});
				}
				this.thisWeek = weekDates;
				this.today = utils.formatTime(new Date().getTime(), 'Y-M-D');
				this.getSignList(this.today, weekDates[0].date, weekDates[6].date)
			},
			//头像
			successPhoto(data) {
				this.oldformdata.avatar = data.imageArr;
			},
			removePhoto(index) {
				this.oldformdata.avatar.splice(index, 1);
			},
			handleSave() {
				this.oldformdata.avatar = this.oldformdata.avatar.join(",");
				uni.showLoading({
					title: "提交中",
				});
				mine
					.updateUserInfo(this.oldformdata)
					.then((res) => {
						uni.hideLoading();
						if (res.code === 200) {
							uni.showToast({
								title: "更新成功",
								icon: "none",
							});
							uni.setStorageSync("userinfo", this.oldformdata);
							this.getUserInfo();
							this.showEditMsg = false;
						} else {
							throw Error();
						}
					})
					.catch((err) => {
						uni.hideLoading();
						uni.showToast({
							title: "更新失败，请稍后重试",
							icon: "none",
						});
					});
			},
			handleLinkTo(url) {
				if (!this.islogin) {
					uni.showToast({
						title: '请先登录',
						icon: "none"
					})
					return;
				}
				uni.navigateTo({
					url: `${url}?id=${this.formdata.id}`,
				});
			},
			getSignList(date, startDate, endDate) {
				mine.getSignList(date, startDate, endDate).then(res => {
					if (res.code === 200) {
						this.thisWeek = res.data.datas.map((item, index) => {
							return {
								...this.thisWeek[index],
								...item
							};
						})
						this.signdays = res.data.days;
					}
				})
			},
			handleSign(item, index) {
				utils.checkSubscribe(['kNywD5KUSQAcMrUUg5_MpcrK2GmOIjx_PDdu11AVFKY'])
				mine.addSign({
					date: item.date
				}).then(res => {
					if (res.code === 200) {
						this.thisWeek[index].isSignIn = 1;
						uni.showToast({
							title: '签到成功',
							icon: "none"
						})
						this.signdays++
					}
				})
			},
			logout() {
				uni.clearStorage();
				this.showLogin = true;
			},
			handleToGongLue() {
				uni.navigateTo({
					url: '/pages/sun/components/jifengonglue/jifengonglue'
				})
			}
		},
		components: {
			loginPopup,
			lUpload
		},
	};
</script>

<style lang="scss" scoped>
	.page-content {
		height: 100%;
		width: 100%;
		padding: 0 32rpx;
		background: linear-gradient(180deg, #fcd610 0%, #f6f6f6 30%, #f6f6f6 100%);
		overflow-y: auto;

		.top-msg {
			.text {
				margin-top: 28rpx;
				color: #000000;
				font-size: 40rpx;
				font-family: PingFang SC;
				font-weight: 700;
				display: block;
			}

			.group_4 {
				margin-right: 8rpx;
				margin-top: 28rpx;

				.font {
					font-size: 24rpx;
					font-family: PingFang SC;
					color: #999999;
				}

				.text_2 {
					color: #666666;
				}

				.image_4 {
					margin-top: 76rpx;
					border-radius: 4rpx;
					width: 32rpx;
					height: 32rpx;
				}
			}
		}

		.sign-today {
			margin-top: 26rpx;

			.section_2 {
				padding: 32rpx;
				background-color: #ffffff;
				border-radius: 16rpx;

				.font_2 {
					font-size: 28rpx;
					font-family: PingFang SC;
					line-height: 25.92rpx;
					font-weight: 700;
					color: #000000;
				}

				.text_3 {
					line-height: 26.24rpx;
				}

				.text_4 {
					color: #fb8f10;
					line-height: 20rpx;
				}

				.text_5 {
					line-height: 24.66rpx;
				}

				.group_6 {
					line-height: 22.22rpx;
					height: 22.22rpx;

					.text_6 {
						color: #000000;
						line-height: 22.22rpx;
					}

					.text_7 {
						line-height: 22.12rpx;
					}
				}

				.image_5 {
					width: 10rpx;
					height: 18rpx;
				}

				.group_7 {
					margin-top: 32rpx;
					width: max-content;
					text-align: center;
					gap: 10rpx;

					.text-wrapper_2 {
						padding: 28rpx 0;
						background-color: #f3f3f3;
						border-radius: 50%;
						width: 72rpx;
						height: 72rpx;

						.font_4 {
							font-size: 24rpx;
							font-family: PingFang SC;
							line-height: 17.48rpx;
							font-weight: 700;
							color: #999999;
						}
					}

					.font_5 {
						font-size: 20rpx;
						font-family: PingFang SC;
						line-height: 14.84rpx;
						color: #999999;
					}

					.text_8 {
						line-height: 21.36rpx;
					}

					.text_9 {
						line-height: 21.8rpx;
					}
				}

				.font {
					font-size: 24rpx;
					font-family: PingFang SC;
					line-height: 21.02rpx;
					color: #999999;
				}

				.font_3 {
					font-size: 24rpx;
					font-family: PingFang SC;
					line-height: 21.02rpx;
					font-weight: 700;
					color: #fb8f10;
				}
			}
		}

		.cells {
			.section_3 {
				margin-top: 32rpx;
				padding: 16rpx 48rpx;
				background-color: #ffffff;
				border-radius: 16rpx;

				.cell-box {
					height: 83rpx;
				}

				.font_6 {
					font-size: 28rpx;
					font-family: PingFang SC;
					color: #000000;
				}

				.image_7 {
					width: 16rpx;
					height: 28rpx;
				}
			}
		}

		.bottom-box {
			.button {
				margin-top: 32rpx;

				.font_2 {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 700;
					color: #000000;
				}
			}

			.text-wrapper_3 {
				padding: 40rpx 0;
				background-color: #fbd610;
				border-radius: 16rpx;
			}
		}

		/deep/ .u-add-tips {
			display: none;
		}

		.edit-title {
			font-weight: bold;
			font-size: 32rpx;
			color: #000000;
			margin-bottom: 24rpx;
		}

		.edit-content {
			background: #f3f3f3;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			padding: 20rpx;
			margin-bottom: 24rpx;
		}

		.save-msg {
			.submit {
				height: 88rpx;
				background: #fcd610;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				font-weight: bold;
				font-size: 28rpx;
				color: #000000;
				text-align: center;
				line-height: 88rpx;
			}
		}

		.no-sign {
			font-weight: bold;
			font-size: 40rpx;
			color: #c8c8c8;
		}
	}
</style>